<template>
  <div class="my">
      <div class="top">
        <div class="pwdManage">
            <img src="../assets/imgs/password-selected.png" alt="">
            <p>密码管理</p>
        </div>
        <div class="cardManage">
            <img src="../assets/imgs/card.png" alt="">
            <p>银行卡管理</p>
        </div>
      </div>

      <div class="content">
        <ul>
          <li><img src="../assets/imgs/risk.png" alt=""> 风险承受能力评估<span>></span></li>
          <li><img src="../assets/imgs/security.png" alt=""> 安全保障<span>></span></li>
          <li><img src="../assets/imgs/follow.png" alt=""> 我的关注<span>></span></li>
          <li><img src="../assets/imgs/help.png" alt=""> 帮助中心<span>></span></li>
          <li><img src="../assets/imgs/about.png" alt=""> 关于我们<span>></span></li>
          <li><img src="../assets/imgs/update.png" alt=""> 检查更新<span>></span></li>
          <li><img src="../assets/imgs/cusservice.png" alt=""> 联系客服<span>></span></li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.my{
  .top{
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    .pwdManage{
      flex: 1;
      text-align: center;
      img{
        width: 25px;
      }
      p{
        margin-top: 5px;
        font-size: 14px;
        color: #666;
      }
    }
    .cardManage{
      flex: 1;
      text-align: center;
      img{
        width: 25px;
      }
      p{
        margin-top: 5px;
        font-size: 14px;
        color: #666;
      }
    }
  }
  .content{
    
    ul{
      display: flex;
      flex-direction: column;
      padding: 10px 10px 0 10px;
      li{
        height: 40px;
        border-bottom: 1px solid #ccc;
        line-height: 40px;
        color: #666;
        font-size: 14px;
        img{
          width: 25px;
          vertical-align: middle;
        }
        span{
          float:right;
          color: rgb(73, 227, 73);
          font-size: 20px;
        }
      }
    }
  }
}
</style>